<template>
  <div>
    <div id="banner">
        <!--动态将图片轮播图的容器高度设置成与图片一致-->
        <el-carousel :height="bannerHeight + 'px'">
          <!--遍历图片地址,动态生成轮播图-->
          <el-carousel-item v-for="item in img_list" :key="item">
            <img :src="item" alt  style="width: 2550px;height: 580px;"/>
          </el-carousel-item>
        </el-carousel>
    </div>
    <div id="nabs1">
      <div class="content">
        <el-row type="flex" class="row-bg" justify="space-around" style="width: 1750px;height: 100px;margin-left: 30px;font-size: large;line-height: 36px">
          <el-col :span="6"><div class="grid-content bg-purple">网游竞技&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">英雄联盟</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">云顶之弈</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">绝地求生</a><br>
            星秀娱乐&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">鬼畜</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">动画</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">舞蹈</a><br>
            正&nbsp;能&nbsp;&nbsp;量&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">正能量</a></div></el-col><span class="seperator sep-left"></span>
          <el-col :span="6"><div class="grid-content bg-purple-light">单机热游&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">主机游戏</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">刺客信条</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">仁王</a><br>
            数码科技&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">数码科技</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">汽车</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">达人</a><br>
            生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;活&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">美食</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">日常</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">搞笑</a></div></el-col><span class="seperator sep-right"></span>
          <el-col :span="6"><div class="grid-content bg-purple">移动游戏&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">王者荣耀</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">LOL手游</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">和平精英</a><br>
            文娱课堂&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">影视</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">鱼艺</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank">鱼教</a><br>
          </div></el-col>
        </el-row>
      </div>
    </div>
    <div id="hotVidoes" class="video-list" ref="scrollOne">
        <div class="content">
         <!-- <div class="video-list-box f1">-->
            <div class="video-title-box">
              <div class="video-title-box-left">
                <span class="video-title-icon"><svg t="1610474477362" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1860" width="40" height="40"><path d="M51.2 51.2m153.6 0l609.28 0q153.6 0 153.6 153.6l0 609.28q0 153.6-153.6 153.6l-609.28 0q-153.6 0-153.6-153.6l0-609.28q0-153.6 153.6-153.6Z" fill="#F19149" opacity=".2" p-id="1861"></path><path d="M587.32032 490.3936L492.29824 435.53792a30.41792 30.41792 0 0 0-15.36-4.2752 32.01024 32.01024 0 0 0-15.69792 4.2752 30.53568 30.53568 0 0 0-15.54432 26.92096v109.7216a31.08352 31.08352 0 0 0 46.62272 26.91584l95.0016-54.84032a31.08352 31.08352 0 0 0 0-53.8624zM509.44 153.6A355.84 355.84 0 1 0 865.28 509.44 355.84 355.84 0 0 0 509.44 153.6z m106.61376 440.3968l-95.02208 54.8608a88.5504 88.5504 0 0 1-132.82304-76.68224v-109.7216a88.54528 88.54528 0 0 1 132.82304-76.68736l95.02208 54.8608a88.5504 88.5504 0 0 1 0 153.3696z" fill="#F19149" p-id="1862"></path></svg></span>
                <span class="video-title">热播视频</span>
              </div>
              <div class="video-title-box-right">
                <span class="more-video1">换一换</span>
                <span class="change-video-icon"><svg t="1610589383256" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3740" width="40" height="40"><path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#8C9EFF" p-id="3741"></path><path d="M512 757c-115.37 0-216.21-81.85-239.79-194.65-2.37-11.35 4.91-22.48 16.26-24.86 11.4-2.31 22.48 4.92 24.86 16.27C332.85 647.19 416.41 715 512 715c95.59 0 179.14-67.81 198.68-161.23 2.37-11.36 13.44-18.73 24.86-16.26 11.35 2.37 18.63 13.49 16.26 24.84C728.21 675.15 627.36 757 512 757zM291.29 495.06c-1.18 0-2.37-0.1-3.56-0.3-11.43-1.96-19.12-12.8-17.17-24.23C290.69 352.6 392.24 267 512 267c119.77 0 221.31 85.6 241.43 203.53 1.96 11.43-5.74 22.27-17.17 24.23s-22.29-5.74-24.23-17.17C695.36 379.9 611.24 309 512 309c-99.23 0-183.36 70.9-200.04 168.59-1.74 10.24-10.63 17.47-20.67 17.47z" fill="#FFFFFF" p-id="3742"></path><path d="M291.28 495.06c-7.26 0-14.31-3.76-18.2-10.5-5.8-10.05-2.36-22.89 7.68-28.68l48.5-28c10.07-5.81 22.89-2.37 28.68 7.68 5.8 10.05 2.36 22.89-7.68 28.68l-48.5 28a20.813 20.813 0 0 1-10.48 2.82zM682.76 607.06c-7.26 0-14.31-3.76-18.2-10.5-5.8-10.05-2.36-22.89 7.68-28.68l48.49-28c10.06-5.8 22.89-2.37 28.68 7.68 5.8 10.05 2.36 22.89-7.68 28.68l-48.49 28a20.813 20.813 0 0 1-10.48 2.82z" fill="#FFFFFF" p-id="3743"></path></svg></span>
              </div>
            </div>
            <div class="video-all-list" >
              <el-row style="height: 587px;margin-top: 15px">
                <el-col :span="4" v-for="(o,index) in livelist" :key="index" :offset="index > 0 ? 0 : 0"style="width: 400px">
                  <el-card :body-style="{ padding: '10px' }">
                    <img :src="o.vPic" class="image" height="200px" style="width: 378px" @click="dianji(o.vId)">
                    <div style="padding: 14px;height: 45px">
                      <span class="desc-video" style="text-overflow: ellipsis;overflow: hidden;">{{o.vDesc}}</span>
                      <div class="bottom clearfix">
                        <time class="time"><!--{{ currentDate }}--></time>
                        <!--<el-button type="text" class="button">操作按钮</el-button>-->
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
         <!-- </div>-->
          <div class="video-list-box-fr fr" style="position: absolute;margin-left: 1641px;margin-top: -646px">
            <div class="video-title-box">
              <div class="video-title-left">
                <span class="hot-title-icon"><svg t="1610475149544" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2959" width="40" height="40"><path d="M294.81 313.92a123.92 122.17 0 1 0 247.84 0 123.92 122.17 0 1 0-247.84 0Z" fill="#22A1E0" p-id="2960"></path><path d="M639.93 726.95c0.87 6.8-1.53 13.64-6.49 18.33-56.8 53.63-133.18 86.47-217.17 86.47-84.19 0-160.73-32.99-217.56-86.85-5.08-4.81-7.41-11.85-6.38-18.78 24.6-166.59 115.38-290.03 223.75-290.03 110.62 0 202.75 124.83 223.85 290.86zM832.09 321.31c0 8.8-3.6 16.8-9.4 22.6s-13.8 9.4-22.6 9.4h-60.58v63.04c0 17.6-14.4 32-31.99 32-8.8 0-16.8-3.6-22.6-9.4-5.8-5.8-9.4-13.8-9.4-22.6v-63.04h-67.4c-17.6 0-31.99-14.4-31.99-32 0-8.8 3.6-16.8 9.4-22.6 5.8-5.8 13.8-9.4 22.6-9.4h67.4v-64.98c0-17.6 14.4-32 31.99-32 8.8 0 16.8 3.6 22.6 9.4 5.8 5.8 9.4 13.8 9.4 22.6v64.98h60.58c17.59 0 31.99 14.4 31.99 32z" fill="#22A1E0" p-id="2961"></path></svg></span>
                <span class="video-title">热门UP主</span>
              </div>
              <div class="video-title-right" id="changeHotUper" style="display: block;">
                <span class="more-video2">换一换</span>
                <span class="change-video-icon"></span>
              </div>
            </div>
            <div class="uper-list">
              <el-card class="box-card">
                <div v-for="o in 4" :key="o" class="text item">
                  {{'列表内容 ' + o }}
                </div>
              </el-card>
            </div>
          </div>
        </div>
    </div>
    <div id="recommended-vidoes" ref="scrollTwo">
      <div>
        <div class="title-bar">
          <i class="recommended"></i>
          <span style="font-size: 31px;position: absolute;margin-left: 25px;margin-top: -15px">老铁精选</span>
        </div>
        <div class="recommened-wrapper" style="margin: auto">
          <el-carousel :interval="4000" type="card" height="453px" style="margin: auto">
            <el-carousel-item v-for="item in videoslist" :key="item" style="margin: auto">
              <h3 class="medium" style="margin: auto"><img :src="item" /></h3>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div id="module1" class="video-list" ref="scrollThree">
      <div class="content">
          <div class="video-title-box">
            <div class="video-title-left">
              <a class="channel-box" data-channel="1" href="" title="网游竞技" target="_blank">
                <img class="video-title-icon" src="https://sta-op.douyucdn.cn/vod-index/2017/11/20/5ed2f72f3937aa1c7a93c77dab97679b.png" ><span class="video-title">网游竞技</span></a>
              <div class="video-secondary-title"><a data-channel="1" data-catelist="133" href="" title="CS:GO" target="_blank">CS:GO</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="6" href="" title="DOTA2" target="_blank">DOTA2</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="5" href="" title="英雄联盟" target="_blank">英雄联盟</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="104" href="" title="绝地求生" target="_blank">绝地求生</a>
              </div>
            </div>
            <a class="video-title-right" data-channel="1" href="" title="网游竞技" target="_blank"><span class="more-video">更多</span><span class="more-video-icon"></span></a>
          </div>
          <div class="video-all-list">
            <el-row style="height: 587px;margin-top: 15px">
              <el-col :span="4" v-for="(o,index) in livelist1" :key="index" :offset="index > 0 ? 0 : 0"style="width: 400px">
                <el-card :body-style="{ padding: '10px' }">
                  <img :src="o.vPic" class="image" height="200px" style="width: 378px" @click="dianji1(o.vId)" >
                  <div style="padding: 14px;height: 40px">
                    <span >{{o.vDesc}}</span>
                    <div class="bottom clearfix">
                      <time class="time"><!--{{ currentDate }}--></time>
                      <!--<el-button type="text" class="button">操作按钮</el-button>-->
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        <div class="list-right-content fr clearfix" style="margin-top: -643px;margin-right: -180px">
          <div class="video-title-box">
            <div class="video-title-left"><span class="ranking-title"></span><span class="uper-title-icon"></span>
            <div class="ranking-list-box">
              <el-card class="box-card">
                <div v-for="o in 4" :key="o" class="text item">
                  {{'列表内容 ' + o }}
                </div>
              </el-card>
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="module2" class="video-list" ref="scrollfour">
      <div class="content">
          <div class="video-title-box">
            <div class="video-title-left">
              <a class="channel-box" data-channel="1" href="" title="单机热游" target="_blank">
                <img class="video-title-icon" src="https://sta-op.douyucdn.cn/vod-index/2017/11/20/5ed2f72f3937aa1c7a93c77dab97679b.png"><span class="video-title">单机热游</span></a>
              <div class="video-secondary-title"><a data-channel="1" data-catelist="133" href="" title="格斗游戏" target="_blank">格斗游戏</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="6" href="" title="我的世界" target="_blank">我的世界</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="5" href="" title="主机游戏" target="_blank">主机游戏</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="104" href="" title="赛博朋克2077" target="_blank">赛博朋克2077</a>
              </div>
            </div>
            <a class="video-title-right" data-channel="1" href="" title="单机热游" target="_blank"><span class="more-video">更多</span><span class="more-video-icon"></span></a>
          </div>
          <div class="video-all-list">
            <el-row style="height: 587px;margin-top: 15px">
              <el-col :span="4" v-for="(o,index) in livelist2" :key="index" :offset="index > 0 ? 0 : 0"style="width: 400px">
                <el-card :body-style="{ padding: '10px' }">
                  <img :src="o.vPic" class="image" height="200px" style="width: 378px" @click="dianji2(o.vId)">
                  <div style="padding: 14px;height: 40px">
                    <span >{{o.vDesc}}</span>
                    <div class="bottom clearfix">
                      <time class="time"><!--{{ currentDate }}--></time>
                      <!--<el-button type="text" class="button">操作按钮</el-button>-->
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>

        <div class="list-right-content fr clearfix" style="margin-top: -643px;margin-right: -180px">
          <div class="video-title-box">
            <div class="video-title-left"><span class="ranking-title"></span><span class="uper-title-icon"></span>
              <div class="ranking-list-box">
                <el-card class="box-card">
                  <div v-for="o in 4" :key="o" class="text item">
                    {{'列表内容 ' + o }}
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="module3" class="video-list" ref="scrollfive">
      <div class="content">
          <div class="video-title-box">
            <div class="video-title-left">
              <a class="channel-box" data-channel="1" href="" title="移动游戏" target="_blank">
                <img class="video-title-icon" src="https://sta-op.douyucdn.cn/vod-index/2017/11/20/5ed2f72f3937aa1c7a93c77dab97679b.png"><span class="video-title">移动游戏</span></a>
              <div class="video-secondary-title"><a data-channel="1" data-catelist="133" href="" title="元神" target="_blank">元神</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="6" href="" title="和平精英" target="_blank">和平精英</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="5" href="" title="王者荣耀" target="_blank">王者荣耀</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="104" href="" title="DNF手游" target="_blank">DNF手游</a>
              </div>
            </div>
            <a class="video-title-right" data-channel="1" href="" title="移动游戏" target="_blank"><span class="more-video">更多</span><span class="more-video-icon"></span></a>
          </div>
          <div class="video-all-list">
            <el-row style="height: 587px;margin-top: 15px">
              <el-col :span="4" v-for="(o,index) in livelist3" :key="index" :offset="index > 0 ? 0 : 0"style="width: 400px">
                <el-card :body-style="{ padding: '10px' }">
                  <img :src="o.vPic" class="image" height="200px" style="width: 378px" @click="dianji3(o.vId)">
                  <div style="padding: 14px;height: 40px">
                    <span >{{o.vDesc}}</span>
                    <div class="bottom clearfix">
                      <time class="time"><!--{{ currentDate }}--></time>
                      <!--<el-button type="text" class="button">操作按钮</el-button>-->
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        <div class="list-right-content fr clearfix" style="margin-top: -643px;margin-right: -180px">
          <div class="video-title-box">
            <div class="video-title-left"><span class="ranking-title"></span><span class="uper-title-icon"></span>
              <div class="ranking-list-box">
                <el-card class="box-card">
                  <div v-for="o in 4" :key="o" class="text item">
                    {{'列表内容 ' + o }}
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div id="module4" class="video-list" ref="scrollsix">
      <div class="content">

          <div class="video-title-box">
            <div class="video-title-left">
              <a class="channel-box" data-channel="1" href="" title="星秀娱乐" target="_blank">
                <img class="video-title-icon" src="https://sta-op.douyucdn.cn/vod-index/2017/11/20/5ed2f72f3937aa1c7a93c77dab97679b.png"><span class="video-title">星秀娱乐</span></a>
              <div class="video-secondary-title"><a data-channel="1" data-catelist="133" href="" title="美食" target="_blank">美食</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="6" href="" title="运动" target="_blank">运动</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="5" href="" title="英雄联盟" target="_blank">英雄联盟</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="104" href="" title="绝地求生" target="_blank">绝地求生</a>
              </div>
            </div>
            <a class="video-title-right" data-channel="1" href="" title="星秀娱乐" target="_blank"><span class="more-video">更多</span><span class="more-video-icon"></span></a>
          </div>
          <div class="video-all-list">
            <el-row style="height: 587px;margin-top: 15px">
              <el-col :span="4" v-for="(o,index) in livelist4" :key="index" :offset="index > 0 ? 0 : 0"style="width: 400px">
                <el-card :body-style="{ padding: '10px' }">
                  <img :src="o.vPic" class="image" height="200px" style="width: 378px" @click="dianji4(o.vId)">
                  <div style="padding: 14px;height: 40px">
                    <span >{{o.vDesc}}</span>
                    <div class="bottom clearfix">
                      <time class="time"><!--{{ currentDate }}--></time>
                      <!--<el-button type="text" class="button">操作按钮</el-button>-->
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        <div class="list-right-content fr clearfix" style="margin-top: -643px;margin-right: -180px">
          <div class="video-title-box">
            <div class="video-title-left"><span class="ranking-title"></span><span class="uper-title-icon"></span>
              <div class="ranking-list-box">
                <el-card class="box-card">
                  <div v-for="o in 4" :key="o" class="text item">
                    {{'列表内容 ' + o }}
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div id="module5" class="video-list" ref="scrollseven">
      <div class="content">
          <div class="video-title-box">
            <div class="video-title-left">
              <a class="channel-box" data-channel="1" href="" title="数码科技" target="_blank">
                <img class="video-title-icon" src="https://sta-op.douyucdn.cn/vod-index/2017/11/20/5ed2f72f3937aa1c7a93c77dab97679b.png"><span class="video-title">数码科技</span></a>
              <div class="video-secondary-title"><a data-channel="1" data-catelist="133" href="" title="汽车" target="_blank">汽车</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="6" href="" title="数码科技" target="_blank">数码科技</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="5" href="" title="军事" target="_blank">军事</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="104" href="" title="绝地求生" target="_blank">绝地求生</a>
              </div>
            </div>
            <a class="video-title-right" data-channel="1" href="" title="数码科技" target="_blank"><span class="more-video">更多</span><span class="more-video-icon"></span></a>
          </div>
          <div class="video-all-list">
            <el-row style="height: 587px;margin-top: 15px">
              <el-col :span="4" v-for="(o,index) in livelist5" :key="index" :offset="index > 0 ? 0 : 0"style="width: 400px">
                <el-card :body-style="{ padding: '10px' }">
                  <img :src="o.vPic" class="image" height="200px" style="width: 378px" @click="dianji5(o.vId)">
                  <div style="padding: 14px;height: 40px">
                    <span >{{o.vDesc}}</span>
                    <div class="bottom clearfix">
                      <time class="time"><!--{{ currentDate }}--></time>
                      <!--<el-button type="text" class="button">操作按钮</el-button>-->
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        <div class="list-right-content fr clearfix" style="margin-top: -643px;margin-right: -180px">
          <div class="video-title-box">
            <div class="video-title-left"><span class="ranking-title"></span><span class="uper-title-icon"></span>
              <div class="ranking-list-box">
                <el-card class="box-card">
                  <div v-for="o in 4" :key="o" class="text item">
                    {{'列表内容 ' + o }}
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div id="module6" class="video-list" ref="scrolleight">
      <div class="content">
          <div class="video-title-box">
            <div class="video-title-left">
              <a class="channel-box" data-channel="1" href="" title="文娱课堂" target="_blank">
                <img class="video-title-icon" src="https://sta-op.douyucdn.cn/vod-index/2017/11/20/5ed2f72f3937aa1c7a93c77dab97679b.png"><span class="video-title">文娱课堂</span></a>
              <div class="video-secondary-title"><a data-channel="1" data-catelist="133" href="" title="影视" target="_blank">影视</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="6" href="" title="鱼教" target="_blank">鱼教</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="5" href="" title="鱼艺" target="_blank">鱼艺</a>&nbsp;&nbsp;&nbsp;&nbsp;<a data-channel="1" data-catelist="104" href="" title="绝地求生" target="_blank">绝地求生</a>
              </div>
            </div>
            <a class="video-title-right" data-channel="1" href="" title="文娱课堂" target="_blank"><span class="more-video">更多</span><span class="more-video-icon"></span></a>
          </div>
          <div class="video-all-list">
            <el-row style="height: 587px;margin-top: 15px">
              <el-col :span="4" v-for="(o,index) in livelist6" :key="index" :offset="index > 0 ? 0 : 0"style="width: 400px">
                <el-card :body-style="{ padding: '10px' }">
                  <img :src="o.vPic" class="image" height="200px" style="width: 378px" @click="dianji6(o.vId)">
                  <div style="padding: 14px;height: 40px">
                    <span >{{o.vDesc}}</span>
                    <div class="bottom clearfix">
                      <time class="time"><!--{{ currentDate }}--></time>
                      <!--<el-button type="text" class="button">操作按钮</el-button>-->
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        <div class="list-right-content fr clearfix" style="margin-top: -643px;margin-right: -180px">
          <div class="video-title-box">
            <div class="video-title-left"><span class="ranking-title"></span><span class="uper-title-icon"></span>
              <div class="ranking-list-box">
                <el-card class="box-card">
                  <div v-for="o in 4" :key="o" class="text item">
                    {{'列表内容 ' + o }}
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="elevator" style="left: auto">
     <!-- <div  class="nav_box" v-for="(item,index) in product" :class="{'navActive':currentIndex === index}" >
        <a :href="'#'+item">{{item}}</a>
      </div>-->
      <ul>
      <li data-target="#hotVidoes"class=""> 热播视频</li>
      <li data-target="#recommended-vidoes" class="">老铁精选</li>
      <li data-target="#module1" class="">网游竞技</li>
      <li data-target="#module2" class="">单机热游</li>
      <li data-target="#module3" class="">移动游戏</li>
      <li data-target="#module4" class="">星秀娱乐</li>
      <li data-target="#module5" class="">数码科技</li>
      <li data-target="#module6" class="">文娱课堂</li>
    </ul>
      <div class="rocket-wrapper">
        <i class="rocket"></i>
        <div class="rocket-ready"></div>
        <div class="rocket-running"></div>
      </div>
    </div>
    <div id="footer">
      <div class="footer-wall hide">
        <div class="content">
          <div class="shark-girl"></div>
          <div class="slogan"></div>
          <div class="qrcode"></div>
        </div>
      </div>
      <div class="outlink">
        <ul class="about">
          <li>
            <a href="//www.douyu.com/cms/about/about_us.html" rel="nofollow">关于我们</a>
            <span class="seperator"></span>
          </li>
          <li>
            <a href="https://kefu.douyu.com/" target="_blank" rel="nofollow">联系客服</a>
            <span class="seperator"></span>
          </li>
          <li>
            <a href="//www.douyu.com/cms/about/jobs.html" rel="nofollow">招聘信息</a>
            <span class="seperator"></span>
          </li>
          <li>
            <a href="//www.douyu.com/cms/about/cooperate.html" rel="nofollow">友情链接</a>
            <span class="seperator"></span>
          </li>
          <li>
            <a href="//www.douyu.com/special/guide/anchor" target="_blank" rel="nofollow">我要直播</a>
            <span class="seperator"></span>
          </li>
          <li>
            <a href="https://kefu.douyu.com/nx/selfmessage.html#/" target="_blank" onclick="try{ check_message(); return false; } catch(e){}" rel="nofollow">意见反馈</a>
            <span class="seperator"></span>
          </li>
          <li>
            <a href="//www.douyu.com/cms/gong/201509/22/2229.shtml" target="_blank" rel="nofollow">版权保护投诉指引</a>
            <span class="seperator"></span>
          </li>
          <li>
            <a href="https://www.douyu.com/cms/gong/201605/30/3643.shtml" target="_blank" rel="nofollow">斗鱼官方QQ号</a>
          </li>
        </ul>
        <p id="footer-company-info-2">
          武汉斗鱼网络科技有限公司 版权所有 ©www.douyu.com 鄂ICP备15011961号-1
          <span class="seperator"></span>
          <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42018502000107" rel="nofollow">
            <img src="https://vstatic.douyucdn.cn/res/com/ghs_d0289dc0a4.png" style="vertical-align: text-bottom;">
            鄂公网安备 42018502000107号
          </a>
          <span class="seperator"></span>
          <a target="_blank" href="http://whgswj.whhd.gov.cn:8089/whwjww/indexquery/indexqueryAction!dizview.dhtml?chr_id=9d45299953ce85733b2ef87d05820ac0&amp;bus_ent_id=420000000009311039&amp;bus_ent_chr_id=82c93ffb8f1b40458298daf104c3f87d" rel="nofollow"><img src="https://vstatic.douyucdn.cn/res/com/gswj_04e057e095.gif" style="vertical-align: text-bottom;">工商网监</a>
          <span class="seperator"></span>
          <a href="http://whgswj.whhd.gov.cn:8089/whwjww/indexquery/indexqueryAction!dizview.dhtml?chr_id=9d45299953ce85733b2ef87d05820ac0&amp;bus_ent_id=420000000009311039&amp;bus_ent_chr_id=82c93ffb8f1b40458298daf104c3f87d" target="_blank" rel="nofollow">鄂网文[2015]1925-037 号</a>
          <br>公司地址：湖北省武汉市东湖开发区光谷软件园F4栋8楼 客户服务热线：027-65026248
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
    export default {

      name: "Banner",
      data() {
        return {
          // 图片地址数组
          img_list: ["https://sta-op.douyucdn.cn/dymvod/2020/12/31/38cb8a1db8c63d74465504c1bed10974.jpg", "https://sta-op.douyucdn.cn/dymvod/2020/12/29/d40f09f380760defbf8f134c150974d2.jpg", "https://sta-op.douyucdn.cn/dymvod/2020/12/31/2ee1bc1f9ca70846069f2725cd88eaa0.png", "https://sta-op.douyucdn.cn/dymvod/2020/12/31/e257492a4b25f389c14df11fb04bec8e.jpg ", "https://sta-op.douyucdn.cn/dymvod/2020/10/30/0418bdd073af204cee1b1cadae7e97a4.png", "https://sta-op.douyucdn.cn/dymvod/2020/12/28/e24827b6fb7afee849bec937c6ad96b3.jpg", "https://sta-op.douyucdn.cn/dymvod/2020/12/25/1e9c58447b8d548ed6b90fd4b88fc49e.jpg", "https://sta-op.douyucdn.cn/dymvod/2020/12/30/612d327414bdb474b268dd1ee0273f95.jpg"],
          // 图片父容器高度
          bannerHeight: 1000,
          // 浏览器宽度
          screenWidth: 0,

          livelist:[],
          livelist1:[],
          livelist2:[],
          livelist3:[],
          livelist4:[],
          livelist5:[],
          livelist6:[],
          currentIndex: 0,
          /*product: ["hotVidoes", "老铁精选", "网游精选", "单机热游", "module3", "module4","module5", "module6"],*/
          product1: [{id:"hotvideos",name:"热播视频"}],

          videoslist:["https://sta-op.douyucdn.cn/dymvod/2021/01/11/d8e148972594b55f0e64a44d13816485.jpg", "https://sta-op.douyucdn.cn/dymvod/2021/01/11/ec40e31f024057bf787dfc9a4f282f9d.jpg", "https://sta-op.douyucdn.cn/dymvod/2021/01/11/5cd79ae2d3df720956586bce9455ae44.jpg", "https://sta-op.douyucdn.cn/dymvod/2021/01/12/3c95a6615b6e3f4b0803d36e0970a45c.jpg", "https://sta-op.douyucdn.cn/dymvod/2021/01/12/00a73279b19cf197db97249e5f045742.jpg", "https://sta-op.douyucdn.cn/dymvod/2021/01/11/8042024844243dc0dc3a78ac81d39042.jpg"

          ],
        };
      },
      methods: {

        dianji:function(id){

          this.$router.push({name:"videos",params:{id:id}})
        },
        dianji1:function(id){
          this.$router.push({name:"videos",params:{id:id}})
        },
        dianji2:function(id){
          this.$router.push({name:"videos",params:{id:id}})
        },
        dianji3:function(id){
          this.$router.push({name:"videos",params:{id:id}})
        },
        dianji4:function(id){
          this.$router.push({name:"videos",params:{id:id}})
        },
        dianji5:function(id){
          this.$router.push({name:"videos",params:{id:id}})
        },
        dianji6:function(id){
          this.$router.push({name:"videos",params:{id:id}})
        },
        setSize: function() {
          // 通过浏览器宽度(图片宽度)计算高度
          this.bannerHeight = (500 / 2250) * this.screenWidth;
        },
        hotvideos: function () {
          axios.get("http://localhost:7000/live-live/videos/findHotVideos").then(res=>{
            if (res.data.code==200){
              this.livelist=res.data.data;
              console.log(this.livelist)
            }
          })

        },

      hotvideos1: function () {
        axios.get("http://localhost:7000/live-live/videos/findHotTour").then(res=>{
          if (res.data.code==200){
            this.livelist1=res.data.data;
            console.log(this.livelist1)
          }
        })

      },
      hotvideos2: function () {
        axios.get("http://localhost:7000/live-live/videos/findMobileGames").then(res=>{
          if (res.data.code==200){
            this.livelist2=res.data.data;
            console.log(this.livelist2)
          }
        })

      },
      hotvideos3: function () {
        axios.get("http://localhost:7000/live-live/videos/findStarShow").then(res=>{
          if (res.data.code==200){
            this.livelist3=res.data.data;
            console.log(this.livelist3)
          }
        })

      },
      hotvideos4: function () {
        axios.get("http://localhost:7000/live-live/videos/findScience").then(res=>{
          if (res.data.code==200){
            this.livelist4=res.data.data;
            console.log(this.livelist4)
          }
        })

      },
      hotvideos5: function () {
        axios.get("http://localhost:7000/live-live/videos/findFirstOne").then(res=>{
          if (res.data.code==200){
            this.livelist5=res.data.data;
            console.log(this.livelist5)
          }
        })

      },
      hotvideos6: function () {
        axios.get("http://localhost:7000/live-live/videos/findHotVideos").then(res=>{
          if (res.data.code==200){
            this.livelist6=res.data.data;
            console.log(this.livelist6)
          }
        })
      },
        handleScroll() {
          //获取滚动时的高度
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
          console.log(scrollTop);
          this.navShow = scrollTop;
          let oneHeight = this.$refs.scrollOne.offsetHeight;
          console.log("oneHeight", oneHeight);
          let twoHeight = this.$refs.scrollTwo.offsetHeight + oneHeight;
          let threeHeight = this.$refs.scrollThree.offsetHeight + twoHeight;
          let fourHeight = this.$refs.scrollfour.offsetHeight + threeHeight;
          let fiveHeight = this.$refs.scrollfive.offsetHeight + fourHeight;
          let sixHeight = this.$refs.scrollsix.offsetHeight + fiveHeight;
          let sevenHeight = this.$refs.scrollseven.offsetHeight + sixHeight;
          let eightHeight = this.$refs.scrolleight.offsetHeight + sevenHeight;

          //需求不一样可以修改，只要内容在底部出现一点，我的导航对应的内容就高亮
          if (scrollTop > 0) {
            this.currentIndex = 0;
          }
          if (scrollTop > 100) {
            this.currentIndex = 1;
          }
          if (scrollTop > oneHeight) {
            this.currentIndex = 2;
          }
          if (scrollTop > twoHeight) {
            this.currentIndex = 3;
          }
          if (scrollTop > threeHeight) {
            this.currentIndex = 4;
          }
          if (scrollTop > fourHeight) {
            this.currentIndex = 5;
          }
          if (scrollTop > fiveHeight) {
            this.currentIndex = 6;
          }
          if (scrollTop > sixHeight) {
            this.currentIndex = 7;
          }
          if (scrollTop > sevenHeight) {
            this.currentIndex = 8;
          }
        }
      },
      mounted() {
        this.hotvideos();
        this.hotvideos1();
        this.hotvideos2();
        this.hotvideos3();
        this.hotvideos4();
        this.hotvideos5();
        this.hotvideos6();

        window.addEventListener("scroll", this.handleScroll);
        // 首次加载时,需要调用一次
        this.screenWidth = window.innerWidth;
        this.setSize();
        // 窗口大小发生改变时,调用一次
        window.onresize = () => {
          this.screenWidth = window.innerWidth;
          this.setSize();
        };

      }
    }
</script>

<style scoped>
  .desc-video{
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 55px;
    line-height: 30px;
    font-size: 20px;
  }
  .desc-video:after{
    position: absolute;
    bottom: 0;
    right: 0;
    padding:0 5px 1px 45px;
    content: '...';
    background: white;
  }
  .video-title-box {
    position: relative;
    z-index: 2;
  }
  .list-right-content span {
    display: inline-block;
    vertical-align: middle;
  }
  .ranking-title, .uper-title-icon {
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-master/assets/icons_d90b47e.png);
    vertical-align: bottom;
  }
  .ranking-title {
    width: 66px;
    height: 22px;
    background-position: 0 0;
    margin-right: 8px;
  }
  .list-right-content span {
    display: inline-block;
    vertical-align: middle;
  }
  .uper-title-icon {
    width: 94px;
    height: 12px;
    background-position: -74px -10px;
  }
  .ranking-title, .uper-title-icon {
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-master/assets/icons_d90b47e.png);
    vertical-align: bottom;
  }
  .ranking-list-box {
    width: 260px;
    margin-top: 24px;
  }
  #nabs1 {
    width: 100%;
    z-index: 5;
    -webkit-box-shadow: 0 1px 15px rgb(0 0 0);
    box-shadow: 0 1px 15px rgba(0,0,0,.1);
    padding: 15px 0;
    box-sizing: border-box;
  }
  #hotVidoes {
    padding-bottom: 20px;
    padding-top: 32px;
  }
  .video-list {
    padding-top: 20px;
    position: relative;
    min-height: 590px;
    background-color: #fff;
  }
  .video-title-box {
    position: relative;
    z-index: 2;
  }
  .content {
    width: 1245px;
    margin: 0 auto;
  }
  #hotVidoes .video-title-icon {
    width: 28px;
    height: 28px;
    background: url(https://shark2.douyucdn.cn/front-publish/demand-master/assets/icons_d90b47e.png) -2px -93px;
    margin-right: 8px;
    vertical-align: -12px;
  }
  .video-title {
    font-size: 26px;
    color: #333;
  }
  .video-title-box-right {
    cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 5px;
  }
  .more-video {
    margin-top: -10px;
    color: #666;
    font-size: 18px;
    position: absolute;
    right: 120px;
    width: 100px;
    text-align: right;
  }

  .change-video-icon {
     width: 13px;
     height: 13px;
    background: url(https://shark2.douyucdn.cn/front-publish/demand-master/assets/icons_d90b47e.png) -109px -75px;
    vertical-align: -4px;
   }
  .video-list-box-fr {
    background: none;
    padding-top: 0;
    min-height: 634px;
    width: 250px;
    padding-top: 12px;
    font-size: 12px;
  }
  .fr {
    float: right;
  }
  .hot-title-icon {
    width: 24px;
    height: 28px;
    margin-right: 8px;
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-master/assets/icons_d90b47e.png);
    background-position: -121px -125px;
  }
  .list-right-content span {
    display: inline-block;
    vertical-align: middle;
  }
  .more-video2 {
    margin-top: -25px;
    color: #666;
    font-size: 14px;
    position: absolute;
    right: 24px;
    width: 50px;
    text-align: right;
  }
  #recommended-vidoes {
    position: relative;
    width: 100%;
    background: url(https://shark2.douyucdn.cn/front-publish/demand-master/assets/recommended_bg_074878d.png) top;
    background-color: rgba(0, 0, 0, 0);
    background-repeat: repeat;
    background-color: #fff;
    background-repeat: repeat-x;
    padding: 30px 0 0;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;

  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
    margin: auto;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
    margin: auto;
  }
  .video-list {
    padding-top: 20px;
    position: relative;
    min-height: 590px;
    background-color: #fff;
  }
  .content {
    width: 1700px;
    margin: 0 auto;
  }
  .list-right-content {
    min-height: 471px;
    background: url(https://shark2.douyucdn.cn/front-publish/demand-master/assets/border_b796168.png) no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-position: 100% 0;
  }
  .list-right-content {
    width: 250px;
    padding-top: 12px;
    font-size: 12px;
  }
  .fr {
    float: right;
  }
  .video-title-box {
    position: relative;
    z-index: 2;
  }
  .video-title-left a {
    display: inline-block;
  }
  .video-title {
    font-size: 26px;
    color: #333;
  }
  .video-secondary-title {
    vertical-align: -8px;
    margin-left: 26px;
    display: inline-block;
    font-size: 17px;
  }
  .more-video1 {
    color: #666;
    font-size: 20px;
    position: absolute;
    right: 200px;
    width: 100px;
    text-align: right;
    margin-top: 13px;
  }
  .video-list-box span {
    display: inline-block;
    vertical-align: middle;
  }
  .video-all-list {
    width: 100%;
    font-size: 15px;
    text-align: justify;
    text-justify: inter-ideograph;
    padding: 0 1px;
    box-sizing: border-box;
    margin-top: 20px;
    position: relative;
    z-index: 1;
  }
  #elevator {

    margin: 50px auto;
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: 90px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    background: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 45px;
    border-bottom-right-radius: 45px;
    z-index: 999;
    text-align: center;
    padding-bottom: 10px;
    -webkit-transform: translateZ(0);
    border: 1px solid #eaeaea \9
  }

  #elevator ul{
    display: inline;
    white-space: normal;
    /*margin-left: 50px;*/
    padding: 0;
    margin-bottom: 10px;
    text-align: left
  }

  #elevator li {
    float: left;
    display: inline-block;
    line-height: 60px;
    color: #333;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    position: relative;
    list-style: none;
    margin: 3px;
    margin-left: 5px;
  }

  #elevator ul li:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
  }

  #elevator ul li:not(:first-child):before {
    content: "";
    display: block;
    position: absolute;
    left: 5px;
    right: 5px;
    top: -1px;
    border-top: 1px solid #eee
  }

  #elevator ul li {
    margin-bottom: 1px
  }

  #elevator ul li:first-child {
    border: none
  }

  #elevator ul li:hover {
    color: #f70
  }

  #elevator ul li.active, #elevator ul li:active {
    background: #f70;
    color: #fff
  }

  #elevator .rocket-wrapper {
    top: 240px;
    width: 66px;
    height: 66px;
    border-radius: 35px;
    border: 1px solid #e1e1e1;
    position: relative;
    cursor: pointer;
    margin: 240px auto;
    box-sizing: border-box
  }

  #elevator .rocket-wrapper img {
    display: none
  }

  #elevator .rocket-wrapper .rocket-running {
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-master/assets/rocket-running_e35189d.gif)
  }

  #elevator .rocket-wrapper .rocket-ready {
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-master/assets/rocket-ready_ee96a75.gif)
  }

  #elevator .rocket-wrapper.running, #elevator .rocket-wrapper:hover {
    border: 1px solid #f50;
    border: none \9
  }

  #elevator .rocket-wrapper.running img.rocket-running {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3
  }

  #elevator .rocket-wrapper.running .rocket-running, #elevator .rocket-wrapper:hover .rocket-ready {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    position: absolute;
    background-size: 100% 100%
  }

  #elevator .rocket-wrapper.running .rocket-running .rocket-ready, #elevator .rocket-wrapper.running i, #elevator .rocket-wrapper:hover i {
    display: none
  }

  #elevator i.rocket {
    background-repeat: no-repeat;
    background-position: -140px -159px;
    width: 24px;
    height: 38px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -19px;
    margin-left: -12px;
    z-index: 1;
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-master/assets/icons_d90b47e.png)
  }

  #footer {
    margin-top: 70px
  }

  #footer .outlink {
    background: #3f3f3f;
    padding: 20px 0;
    text-align: center;
    max-width: 100%;
    width: 100%
  }

  #footer .outlink a {
    display: inline-block
  }

  #footer .foot {
    width: 1160px;
    height: 166px;
    margin: 0 auto
  }

  #footer .outlink .about {
    text-align: center;
    margin: 0 auto;
    padding: 0 0 0 38px;
    line-height: 24px;
    overflow: hidden;
    width: auto
  }

  #footer .outlink .about li {
    display: inline-block;
    float: none
  }

  #footer .seperator {
    display: inline-block;
    margin: 0 3px;
    width: 0;
    height: 10px;
    border-right: 2px solid #949494
  }

  #footer .outlink .about li a, #footer .outlink .about li span {
    color: #b1b1b1
  }

  #footer #footer-company-info-2 a:hover, #footer .outlink .about li a:hover {
    color: #ff6a1f
  }

  #footer .outlink > p, #footer .outlink > p a {
    line-height: 24px;
    color: #b1b1b1
  }
  #footer .footer-wall {
    display: block !important;
    height: 530px;
    width: 100%;
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-master/assets/buildings_15b4531.png);
    background-position: bottom;
    background-repeat: repeat-x;
  }
  #footer .footer-wall .content {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  #footer .footer-wall .content .shark-girl {
    position: absolute;
    right: 234px;
    bottom: -107px;
    z-index: 2;
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-master/assets/girl_350b99a.png);
    background-size: 100% 100%;
    width: 539px;
    height: 566px;
  }
  #footer .footer-wall .content .slogan {
    position: absolute;
    left: 10px;
    bottom: 120px;
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-master/assets/slogan_b287dcb.png);
    background-size: 100% 100%;
    width: 401px;
    height: 99px;
  }
  #footer .footer-wall .content .qrcode {
    position: absolute;
    right: 25px;
    bottom: -107px;
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-master/assets/qrcode_1a251cc.png);
    background-size: 100% 100%;
    width: 199px;
    height: 338px;
  }
  #footer .outlink {
    background: #3f3f3f;
    padding: 20px 0;
    text-align: center;
    max-width: 100%;
    width: 100%;
  }


</style>
